<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Vue生命周期和钩子函数</title>
  </head>
  <body>
<!--  用户看到的页面-->
  <div id="app">
    <span id="num">{{num}}</span>
    <button @click="add()">赞!</button>
    <h2>{{name}},有{{num}}个人点赞</h2>
  </div>

  <script src="vue.js"></script>
  <script type="text/javascript">
    let vm = new Vue({
      el:"#app",
      data:{
        name:"kristina",
        num:0
      },
      methods:{
        show(){
          return this.name;
        },
        add(){
          this.num++;
        }
      },
      beforeCreate() {  //生命周期函数-创建vue实例前
        console.log("===========beforeCreate==============")
        console.log("数据模型/数据池的数据是否加载/使用?(no)", this.name, " ", this.num)
        // console.log("自定义方法是否加载/使用?(no)", this.show()) 会报错
        console.log("用户页面dom是否加载/使用?(yes)", document.getElementById("num"))
        console.log("用户页面dom是否被渲染?(no)", document.getElementById("num").innerText)
      },
      created(){  //生命周期函数-创建vue实例
        console.log("===========create==============")
        console.log("数据模型/数据池的数据是否加载/使用?(yes)", this.name, " ", this.num)
        console.log("自定义方法是否加载/使用?(yes)", this.show())
        console.log("用户页面dom是否加载/使用?(yes)", document.getElementById("num"))
        console.log("用户页面dom是否被渲染?(no)", document.getElementById("num").innerText)
        //经常在created函数中发送ajax请求
        //接收后端返回的术后再次去更新data数据池的数据
        //下一步开始编译内存模板,再挂载到dom上,可以让用户看到最新的值
      },
      beforeMount() { //生命周期函数-挂载前
        console.log("===========beforeMount==============")
        console.log("数据模型/数据池的数据是否加载/使用?(yes)", this.name, " ", this.num)
        console.log("自定义方法是否加载/使用?(yes)", this.show())
        console.log("用户页面dom是否加载/使用?(yes)", document.getElementById("num"))
        console.log("用户页面dom是否被渲染?(no)", document.getElementById("num").innerText)
      },
      mounted() { //生命周期函数-挂载完成
        console.log("===========mount==============")
        console.log("数据模型/数据池的数据是否加载/使用?(yes)", this.name, " ", this.num)
        console.log("自定义方法是否加载/使用?(yes)", this.show())
        console.log("用户页面dom是否加载/使用?(yes)", document.getElementById("num"))
        console.log("用户页面dom是否被渲染?(yes)", document.getElementById("num").innerText)
      },
      beforeUpdate() {  //生命周期函数-数据池数据更新前
        console.log("===========beforeUpdate==============")
        console.log("数据模型/数据池的数据是否加载/使用?(yes)", this.name, " ", this.num)
        console.log("自定义方法是否加载/使用?(yes)", this.show())
        console.log("用户页面dom是否加载/使用?(yes)", document.getElementById("num"))
        console.log("用户页面dom数据是否被更新?(no)", document.getElementById("num").innerText)
        //经常在此验证数据=>修正
        if (this.num < 10) {
          this.num = 8;
        }
      },
      updated() { //生命周期函数-数据池数据更新后
        console.log("===========update==============")
        console.log("数据模型/数据池的数据是否加载/使用?(yes)", this.name, " ", this.num)
        console.log("自定义方法是否加载/使用?(yes)", this.show())
        console.log("用户页面dom是否加载/使用?(yes)", document.getElementById("num"))
        console.log("用户页面dom数据是否被更新?(no)", document.getElementById("num").innerText)
      }
    })
  </script>
  </body>
</html>